import React, { useEffect, useState } from 'react'
import api from '@/api'
import {
    Space, Table, Tag, Image, Button, Drawer, message, Card,
    Cascader,
    Checkbox,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Radio,
    Select,
    Switch,
    TreeSelect,
    Upload,
    Pagination,
    Dropdown
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { SearchOutlined, EditOutlined, CloseOutlined, PlusOutlined } from '@ant-design/icons';
export default function ChangeWorkerMsg() {
    const [province, setProvince] = useState([])
    const [city, setCity] = useState([])
    const [town, setTown] = useState([])
    const [loctions, setLoction]: any = useState([])

    // let location: any = []
    const [avatar, setAvatar] = useState('')
    function filechange(args: any) {
        if (args.file.status == 'done') {
            console.log(args.file.response.url);
            setAvatar(args.file.response.url)
        }
    }
    async function getprovince() {
        const res = await api.worker.getProvince()
        const correct = transfrom(res.data.data)
        setProvince(correct)
    }
    async function getCity(args: any) {

        const res = await api.worker.getCity({ province_id: Number(args) })
        const correct = transfrom(res.data.data)
        setCity(correct)
    }

    async function getTown(args: any) {
        const res = await api.worker.getTown({ city_id: Number(args) })
        const correct = transfrom(res.data.data)
        setTown(correct)
    }

    function transfrom(args: any) {
        let ary: any = []
        args.forEach((item: any) => {
            let obj: any = {}
            obj['value'] = item.id + ',' + item.name
            obj['label'] = item.name
            ary.push(obj)
        })
        return ary
    }

    function provinceChange(args: any) {

        const str = args.split(',')
        if (loctions.length == 0) {
            setLoction([...loctions, str[1]])
        }

        getCity(str[0])

    }


    function cityChange(args: any) {
        const str = args.split(',')
        if (loctions.length == 1) {
            setLoction([...loctions, str[1]])
        }
        getTown(str[0])
    }

    function townChange(args: any) {
        const str = args.split(',')
        if (loctions.length == 2) {
            setLoction([...loctions, str[1]])
        }

    }

    function delall() {
        setLoction([])
    }







    async function submit(args: any) {
        let sedLoction = ''
        if (loctions[0] == loctions[1]) {
            let re = loctions.slice(-2)
            re.forEach((item: any) => {
                sedLoction += item + ','
            })
        } else {
            loctions.forEach((item: any) => {
                sedLoction += item + ','
            })
        }
        // console.log(sedLoction);
        const res = await api.worker.updateWorkerMsg({ ...args, img: avatar, location: sedLoction })
        message.success(res.data.msg)
        console.log({ ...args, img: avatar, location: sedLoction });






    }

    useEffect(() => {
        getprovince()
    }, [])
    return (
        <div>
            <Card>
                <Form
                    layout="horizontal"
                    style={{ maxWidth: 600 }}
                    onFinish={submit}

                >
                    <Form.Item label='修改昵称' name='nickname'>
                        <Input></Input>
                    </Form.Item>
                    <Form.Item label='修改电话' name='phone'>
                        <Input></Input>
                    </Form.Item>
                    <Form.Item label='基本信息' name='detail'>
                        <Input></Input>
                    </Form.Item>
                    <Form.Item label='年龄' name='age'>
                        <Input></Input>
                    </Form.Item>

                    <Form.Item label='修改头像'>
                        <Upload action="http://localhost:3005/api/upload" listType="picture-card" maxCount={1} name='file' onChange={filechange} >
                            <div>
                                <PlusOutlined />
                                <div style={{ marginTop: 8 }}>上传</div>
                            </div>
                        </Upload>
                    </Form.Item>
                    <Form.Item label='选择省'>

                        <Select options={province} onChange={provinceChange}
                        ></Select>
                    </Form.Item>
                    <Form.Item label='选择市'>
                        <Select options={city} onChange={cityChange}
                        ></Select>
                    </Form.Item>
                    <Form.Item label='选择区'>

                        <Select options={town} onChange={townChange}
                        ></Select>
                    </Form.Item>
                    <Form.Item>
                        <Button htmlType='submit'>修改</Button>
                    </Form.Item>


                </Form>


            </Card>
        </div>
    )
}
